<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib  uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata"%>
<%@taglib uri="http://chances.com.cn/jsp/schedule" prefix="schedule"%>
<%@taglib uri="http://chances.com.cn/jsp/epgutils" prefix="epgutils" %>
<%@page import="java.util.Date"%>
<%@page import="java.util.Calendar"%>

<%
	String[] dates = {"周日","周一","周二","周三","周四","周 五","周六"};
	request.setAttribute("dates",dates);
%>
<c:set var="now" value="${epgutils:now()}"/>
<fmt:formatDate var="todayString" pattern="yyyy-MM-dd" value="${now}"/>

<%--查询当前频道 --%>
<epgdata:content var="channel" type="channel" code="${_context.contentCode}"/>

<%--查询当前频道的 编排 --%>
<%-- 不再遍历编排，直接接收icon（编排图片）与title（编排标题）两个参数 <epgdata:categoryItem size="999" code="${_context.containerCode}" var="items"/>
<c:forEach items="${items}" var="item">
	<c:if test="${item.itemCode == _context.contentCode}">
		<c:set var="channelItem" value="${item}"/>
	</c:if>
</c:forEach> --%>

<%--查询当前频道播放的节目单 --%>
<schedule:playing var="schedule" size="1" channelCode="${_context.contentCode}" />
<c:set var="curPlayScheduleCode" value="${schedule[0].code}"/>

<%-- 频道导航 --%>
<epgdata:bizList var="channelMenu_cat" code="${liveBizCode}"/>

<%--查询今日节目单 --%>
<c:set var="today" value="${epgutils:today()}"/>
<schedule:scheduleFilter var="schedules" size="99" channelCode="${_context.contentCode}" 
	startTime="${today.begin.time}" endTime="${today.end.time}"/>
<c:set var="index" value="0"/>
<c:forEach var="item" items="${schedules}" varStatus="i">
	<c:if test="${item.code == schedule[0].code && i.index > 2}">
		<c:set var="index" value="${i.index - 2}"/>
	</c:if>
</c:forEach>
<%--ajaxurl list--%>
<epgdata:ajaxUrl var="ajaxUrl" ajaxName="ajax_live_list"/>
<%--ajaxurl schedule--%>
<epgdata:ajaxUrl var="ajaxUrlSchedule" ajaxName="ajax_live_schedule"/>

<!DOCTYPE html>
<html>
<head>
	<title>SMART_TV</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<%@include file="/sites/weixin/js/common.jsp" %>
	<%@include file="/sites/weixin/common/common_js.jsp" %>
	<link rel="stylesheet" type="text/css" href="${_contextPath}/sites/weixin/css/wx.css" />
	<style>.swiper-slide{margin-right: 4%;}</style>
</head>
<body onload="init()">
<c:set var="title" value="${param.title}" />
<c:if test="${empty title}">
	<c:set var="title" value="${channel.title}" />
</c:if>
<c:set var="imgCol" value="${param.icon}"/>
<c:if test="${empty imgCol}">
	<c:set var="imgCol" value="${channel.icon}"/>
</c:if>
<!-- 频道名称 -->
<div class="row navbar-fixed-top menu-row">
	<div class="col-xs-2 menu-col"  onclick="onBackEvent();">
		<img src="${_contextPath}/sites/weixin/images/wx_back.png" class="menu-col-back"/>
	</div>
	<div class="col-xs-8 menu-col">
		<span>${title}</span>	
	</div>
	<div class="col-xs-2 menu-col" onclick="collect('${channel.contentCode}','${title}',
		'${imgCol}','channel','','${EPG_USER_SESSION.userId}','${_context.containerCode}')">
		<img id="collectImage" src="${_contextPath}/sites/weixin/images/wx_collect.png"  class="menu-col-back"/>
	</div>
</div>
<!-- 频道详情 -->
<div class="row row-detail" style="margin-top:4em;margin-left:0.7em;margin-right:0.7em;">
	<c:set var="imgSrc" value="${_contextPath}/weixin/sites/images/defaultBg_2.jpg"/>
	<c:if test="${!empty imgCol}">
		<c:set var="imgSrc" value="${_resourcePath}${imgCol}"/>
	</c:if>
	<div class="col-xs-4 col-content-live">
		<div class="live-img-div">
			<img class="lazyImg width-100" src="${_contextPath}/sites/weixin/images/defaultBg_3.jpg" data-original="${imgSrc}"/>
		</div>
	</div>
	<div class="col-xs-8 col-content" style="padding-left:0.7em;">
		<div style="text-align: left;"><span style="font-size: 1.1em;">${schedule[0].name}</span></div>
		<div style="float:right;margin-top:1.2em;" onclick="playSchedule('${curPlayScheduleCode}','')">
			<img style="max-width:70px;" src="${_contextPath}/sites/weixin/images/tvshow.png"/>
		</div>
	</div>
	<script>
		$("img.lazyImg").lazyload();
	</script>
</div>

<div class="index-line" style="margin-top:2em;height: 0.3em;"></div>

<!-- 二级导航 -->
<div class="row row-content-type channel-menu">
        <div id="schedule" class="col-xs-6 live-detail-menu-fcs"  onclick="changeToSchedule('schedule','channels')">
        	<span>节目单</span>
       	</div>
        <div id="channels" class="col-xs-6 live-detail-menu" onclick="changeToChannels('channels','schedule')"><span>选台</span></div>
</div>

<div id="schedule_content">
	<!-- 日期选择 -->	
	
	<!-- 获取年份 -->
	<div style="margin-left:0px;margin-right:0px; height: 2.5em; text-align: -webkit-center;background-color: #f2f1f1;">
		<div  id="scroll_date_swiper"  class="swiper-container" >
			<div id="scroll_date"  class="swiper-wrapper schedule-date">
				<c:forEach items="${epgutils:days(-3,4)}" var="item" varStatus="i">
				<fmt:formatDate var="date" pattern="MM-dd" value="${item}" />
				<c:set var="color" value="#000"/>
				<c:set var="text" value="${date}&nbsp;${dates[item.day]}"/>
				<c:if test="${i.index == 3 }">
					<c:set var="color" value="#16a3b7"/>
					<c:set var="text" value="今天"/>
				</c:if>
				<div class="swiper-slide"  style="height:2.5em;background-color: #f2f1f1;">
					<div onclick="getScheduleByDate('${i.index}')" style="color:${color};" 
						id="scheduleDay_${i.index}" class="inner-live-schedule">${text}</div>
				</div>
				</c:forEach>
			</div>
		</div>
	</div>
	<!-- 内容 -->
	<div id="swiper_schedule" class="container-fluid">
	<div id="scroll_schedule_swiper" class="swiper-container"><!-- style="height:18.5em;" -->
		<div id="scroll_schedule"  class="swiper-wrapper" style="margin-right:0em;
		-webkit-transform: translate3d(0,-${index * 4}em,0); -moz-transform: translate3d(0,-${index * 4}em,0);
    	-o-transform: translate(0,-${index * 4}em,0); -ms-transform: translate3d(0,-${index * 4}em,0); transform: translate3d(0,-${index * 4}em,0);">
    		<c:forEach items="${schedules}" var="item" varStatus="i">
				<c:set var="imgSrc" value="${_contextPath}/sites/weixin/images/live_detail_yuyue.png"/>
				<c:if test="${item.endTime <= now}">
					<c:set var="imgSrc" value="${_contextPath}/sites/weixin/images/live_detail_back.png"/>
				</c:if>
				<c:if test="${item.startTime <= now && item.endTime > now}">
					<c:set var="imgSrc" value="${_contextPath}/sites/weixin/images/live_detail_play.png"/>
				</c:if>
				
				<fmt:formatDate var="scheduleStartTime" value="${item.startTime}" pattern="HH:mm"/>
				<fmt:formatDate var="startTime" value="${item.startTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
				<fmt:formatDate var="endTime" value="${item.endTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
				<c:if test="${item.startTime >= now }">
				<%-- <div class="swiper-slide swiper-slide-schedule" style="height: 4em;margin-right: 0em;text-align: left;margin-right: 0em;">
				<div class="row row-schedule" onclick="yuyue('${item.code}','${item.name}','${startTime}','${endTime}')">
					<div class="col-xs-10 showDot" id="content_${i.index}" ><span>${scheduleStartTime}&nbsp;&nbsp;${item.name}</span></div>	
					<div class="col-xs-2 schedule-img" ><img class="yuyueItem col-schedule-image" id="${item.code}" src="${imgSrc}"/></div>
				</div>
				</div> --%>
				<div class="swiper-slide swiper-slide-schedule" style="height: 4em;margin-right: 0em;text-align: left;margin-right: 0em;">
				<div class="row row-schedule">
					<div class="col-xs-10 showDot" id="content_${i.index}" ><span>${scheduleStartTime}&nbsp;&nbsp;${item.name}</span></div>	
					<%-- <div class="col-xs-2 schedule-img" ><img class="yuyueItem col-schedule-image" id="${item.code}" src="${imgSrc}"/></div> --%>
				</div>
				</div>
				</c:if>
				<c:if test="${item.startTime < now}">
				<div class="swiper-slide swiper-slide-schedule" style="height: 4em;margin-right: 0em;text-align: left;margin-right: 0em;">
					<div class="row row-schedule" onclick="playSchedule('${item.code}','${item.name}')">
						<div class="col-xs-10 showDot" id="${item.code}"><span>${scheduleStartTime}&nbsp;&nbsp;${item.name}</span></div>	
						<div class="col-xs-2 schedule-img" ><img class="col-schedule-image" id="live_detail_${i.index}" src="${imgSrc}"/></div>
					</div>
				</div>
				</c:if>
				<c:if test="${(i.index+1) == fn:length(schedules) }">
					<div class="swiper-slide" style="height: 17.8em; margin-right: 0em;text-align: left;margin-right: 0em;">
					</div>
				</c:if>
			</c:forEach>
		</div>
	</div>
	
	</div>
	
</div>

<div id="channels_content">
	<div  id="scroll_menu_swiper"  class="swiper-container" style="background-color: #f2f1f1; height: 0px;">
		<div id="scroll_menu"  class="swiper-wrapper">
			<c:forEach items="${channelMenu_cat}" var="item" varStatus="i">
				<div class="swiper-slide"  style="width:17%;height: 2.5em;background-color: #f2f1f1;">
					<div  id="liveType_${i.index+1}" class="inner-live" style="border: 0px;font-size:1.1em;" onclick="chooseLiveType('${item.categoryCode}','${i.index+1}')"><span >${item.title}</span></div>
				</div>
			</c:forEach>
		</div>
	</div>
	<div id="content_channel" class="container-fluid" style="margin-top:0.5em">
	</div>
</div>

<div id="alertDiv" class="navbar-fixed-bottom" align="center"  style="margin-left: 25%;padding-top:10px;border-radius: 5px; opacity: 0.7; width:50%;height:40px; margin-bottom:10px;background-color:black; display: none; z-index: 99;color:white ">
	<span>预约成功！</span>
</div>

<script>
var h = $(window).height();
$("#scroll_schedule_swiper").css("height", h);

function init(){
	initCollectImage('${channel.contentCode}');
	changeCss(CurrentLiveTypeId);
	$("#channels_content").hide();
	//getScheduleByDate('${todayString}',3);
	
	currentFcsId = "${curPlayScheduleCode}";
	$("#"+currentFcsId).css("color","#16a3b7");
	
	//refreshYuyue();
}

function strExist(str) {
	if (str != null && str != "" && (typeof str) != "undefined"&&str!="undefined") {
		return true;
	}
	return false;
}

function gotoLink(url){
	window.location.href = url;
}

function yuyue(scheduleCode,name,nextTime,endTime){
	stbs = weixinOption.bind; 
	if(stbs.length >= 1){
		showLoading('预约处理中');
		//用于提交接口
		var content = new EpgContent('schedule',scheduleCode,'${_context.contentCode}',"${title}: "+name,'${imgCol}');
		content.nextDate = nextTime;
		content.endDate = endTime;
		content.userId = '${EPG_USER_SESSION.userId}';
		content.stbNo = stbs[0].stbNo;
		//用于本地存储
		var contentStorage = new EpgCollection(scheduleCode,name,'','schedule','','','');
		if(yuyueStorage.exist(contentStorage.contentId)){
			subCtrl.remove(content,function(){
				yuyueStorage.remove(contentStorage.contentId);
				var src = "${_contextPath}/sites/weixin/images/live_detail_yuyue.png";
				setTimeout("hideAlert('取消预约成功','"+scheduleCode+"','"+ src +"')",2000);
			});
		}else{
			subCtrl.add(content,function (){
				yuyueStorage.add(contentStorage);
				var src = "${_contextPath}/sites/weixin/images/live_detail_yuyue_fcs.png";
				setTimeout("hideAlert('预约成功','"+scheduleCode+"','"+ src +"')",2000);
			});
		}
	}else{
		gotoLink("${personUrl}");
	}
}
var currentFcsId = "";
var chooseId = "";
function playSchedule(scheduleCode,name) {
	var params = {
			userId:'${EPG_USER_SESSION.userId}',
			type:'schedule',
			code:scheduleCode,
			prog:'${_context.contentCode}',
			title:"${title}: "+name,
			icon:'${imgCol}'
		}
	if(scheduleCode == "${curPlayScheduleCode}") {
		//content = new EpgContent('channel',"${context['EPG_CONTENT_CODE']}",'','${title}','${imgCol}');
		params.type = 'channel';
		params.code = '${channel.channelNum}';
		params.prog = '${_context.contentCode}';
		params.title = "${title}";
		params.icon = '${imgCol}';
	}
	chooseId = scheduleCode;
	play(params,"${personUrl}","schedule_det",changeStyle);
}
function changeStyle(){
	if(currentFcsId != ""){
		$("#"+currentFcsId).css("color","#000");
	}
	$("#"+chooseId).css("color","#16a3b7");
	currentFcsId = chooseId;
	setTimeout("hideAlert('播放请求已发送')",2000);
}

function changeToSchedule(fcsId,blrId){
	$("#"+blrId).removeClass("live-detail-menu-fcs").addClass("live-detail-menu");
	$("#"+fcsId).addClass("live-detail-menu-fcs");
	
	$("#"+fcsId+"_content").show();
	$("#"+blrId+"_content").hide();
	
	swiper2 = new Swiper("#scroll_schedule_swiper",{
		direction: 'vertical', 
		slidesPerView: 'auto',
	});
}
function changeToChannels(fcsId,blrId){
	$("#"+blrId).removeClass("live-detail-menu-fcs").addClass("live-detail-menu");
	$("#"+fcsId).addClass("live-detail-menu-fcs");
	
	$("#"+fcsId+"_content").show();
	$("#"+blrId+"_content").hide();
	$("#scroll_menu_swiper").css("height","30px");
	chooseLiveType('${channelMenu_cat[0].categoryCode}','1');
}
var CurScheduleDayIdx = 3;

function getScheduleByDate(scheduleDayIdx){
	//alert(dateString);
	$("#scheduleDay_"+CurScheduleDayIdx).css("color","#000");
	CurScheduleDayIdx = scheduleDayIdx;
	$("#scheduleDay_"+CurScheduleDayIdx).css("color","#16a3b7");
	var info = {
			scheduleDayIdx:scheduleDayIdx,
			channelCode:"${_context.contentCode}",
			businessCode:"${_context.bizCode}",
			contextPath:"${_contextPath}"};
	ajaxUrlGetData(info);
}

function ajaxUrlGetData(info){
	$.ajax({
		type:"get",
		//url:"${_contextPath}/sites/weixin/default/ajax_live_schedule.jsp",
		url:"${ajaxUrlSchedule}",
		async:false,
		data:info,
		success:function(data){
			//$("#content_schedule").html(data);
			//$("#scroll_schedule").html(data);
			$("#swiper_schedule").html(data);
			//dataPage = dataPage;
			changePosition();
			//refreshYuyue();
		},
		error:function(){}
	});
}
function changePosition(){
	var h = $(window).height();
	$("#scroll_schedule_swiper").css("height", h);
	
	swiper2 = new Swiper("#scroll_schedule_swiper",{
		direction: 'vertical', 
		slidesPerView: 'auto',
	});
}
function refreshYuyue(){
	if(currentFcsId != ""){
		$("#"+currentFcsId).css("color","#16a3b7");
	}
	$(".yuyueItem").each(function(index,ele){
		if(yuyueStorage.exist(ele.id)){
			var id = ele.id;
			var ele = document.getElementById(id);
			var imgSrc = ele.src;
			var idx = imgSrc.lastIndexOf(".png");
			imgSrc = imgSrc.substring(0,imgSrc.lastIndexOf(".png"));
			imgSrc = imgSrc +"_fcs.png";
			$("#"+id).attr("src",imgSrc);
		}
	});
}

var CurrentLiveTypeId = "1";
function changeCss(typeId){
	$("#liveType_"+CurrentLiveTypeId).removeClass().addClass("inner-live");
	CurrentLiveTypeId = typeId;
	$("#liveType_"+CurrentLiveTypeId).removeClass().addClass("inner-live-fcs");
}
var info_channel = {categoryCode:"",businessCode:"${_context.bizCode}",contextPath:"${_contextPath}",resourcePath:"${_resourcePath}",siteCode:"${_context.siteCode}"};
function chooseLiveType(categoryCode,typeId){
	info_channel.categoryCode = categoryCode;
	changeCss(typeId);
	ajaxUrlGetData_channel();
}
function ajaxUrlGetData_channel(){
	$.ajax({
		type:"get",
		//url:"${_contextPath}/sites/weixin/default/ajax_live_list.jsp",
		url:"${ajaxUrl}",
		async:false,
		data:info_channel,
		success:function(data){
			$("#content_channel").html(data);
			//dataPage = dataPage;
		},
		error:function(){}
	});
}

</script>
<script>
	$(document).ready(function(){
		var swiper2 = new Swiper("#scroll_schedule_swiper",{
			direction: 'vertical', 
			slidesPerView: 'auto',
   		});
		
		var names = ["#scroll_date_swiper","#scroll_menu_swiper"];
	   		$.each(names,function(i,val){
	   			 var swiper1 = new Swiper(val, {
	    			  	 slidesPerView: 'auto',
	       				 //spaceBetween: 10
	   				 });
	   		});
	   		
	   		
	   });
</script>
<%@include file="/sites/weixin/common/bodyEndVm.jsp" %>
</body>
</html>
